<template>
  <div class="wrap">
    <myHead title="求职期望"></myHead>
    <div class="boxWrap">
      <div class="rm-qzqw" @click="edit(placeholder)">
        <div class="rm-tit" >期望职位</div>
        <div class="rm-bot">
          <p>{{placeholder}}</p>
        </div>
      </div>
      <div class="rm-qzqw">
        <div class="rm-tit" >薪资要求</div>
        <div class="rm-bot" @click="showActionBtn(0)">
          <p>{{money}}</p><img src="../../../static/img/youjiantou003.png" alt="">
        </div>
      </div>
      <div class="rm-qzqw">
        <div class="rm-tit" >工作城市</div>
        <div class="rm-bot" @click="showPopup">
          <p>{{showAddr?showAddr:'请选择省、市、区'}}</p><img src="../../../static/img/youjiantou003.png" alt="">
        </div>
      </div>
      <div class="rm-qzqw" @click="showActionBtn(1)">
        <div class="rm-tit" >工作性质</div>
        <div class="rm-bot">
          <p>{{work}}</p><img src="../../../static/img/youjiantou003.png" alt="">
        </div>
      </div>
    </div>
    <div class="btn" @click="save">保存</div>
    <van-popup v-model="show" position="bottom">
      <van-area
        :area-list="areaList"
        :columns-placeholder="['请选择', '请选择', '请选择']"
        title="选择地址"
        @change="changeAddr"
        @cancel="cancelChoose"
        @confirm="chooseThis"
      />
    </van-popup>
    <van-dialog v-model="showContent" title="期望职位" confirmButtonColor="#FB4448" cancelButtonColor="#333333" show-cancel-button @confirm="submit()">
      <input class="dialog" type="text" :placeholder="placeholder" v-model="value" />
    </van-dialog>
    <van-action-sheet v-model="showAction" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  import VDistpicker from 'v-distpicker';
  import Vue from 'vue';
  import {Area} from 'vant';
  import {cell} from "vant"
  import {Popup,Dialog,ActionSheet} from 'vant';

  Vue.use(Popup);
  Vue.use(cell);
  Vue.use(Area);
  Vue.use(Dialog);
  Vue.use(ActionSheet);
  import address from "../../../static/data/address/address.js";

  export default {
    name: "jobExpectation",
    components: {
      myHead,
      VDistpicker
    },
    data(){
      return {
        id:0, //编辑类型
        areaList: address,
        show: false,
        showContent: false,
        showAction: false,
        value:"",
        actions: [{name:"50/天"},{name:"100/天"},{name:"150/天"},{name:"200/天"},{name:"250/天"}], //薪资分类
        placeholder:"如：收银员",
        money: "100/天", //薪资
        work: "兼职", //兼职
        resAddr:'',
        showAddr:'',
        province: '',      //省
        city: '',      //市
        district: '',      //区
        expect:false, //求职期望
      }
    },
    created() {
      this.$myAxios('index/Resume/expect', 'post', {
        user_id:this.$myStorage.query()
      }).then(res => {
        console.log(res);
        if(res.data.state == 1){
          if(res.data.expect){
            this.placeholder = res.data.expect.position;
            this.money = res.data.expect.pay;
            this.province = res.data.expect.province;
            this.city = res.data.expect.city;
            this.district = res.data.expect.district;
            this.showAddr = res.data.expect.province + "-" + res.data.expect.city + "-" + res.data.expect.district;
            this.work = res.data.expect.nature;
          }
        }else{
          this.$myNotice("网络连接中断...",2000);
          this.$router.back();
        }
      });
    },
    methods:{
      jump(page){
        this.$router.push({
          name:page
        })
      },
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.showAction = false;
        if(this.id == 0){
          this.money = item.name
        }else {
          this.work = item.name
        }
      },
      showActionBtn(id){
        this.showAction = true;
        this.id = id;
        if(id==0){
          this.actions = [{name:"50/天"},{name:"100/天"},{name:"150/天"},{name:"200/天"},{name:"250/天"}]
        }else{
          this.actions = [{name:"周末兼职"},{name:"校内兼职"},{name:"小时工"}]
        }
      },
      showPopup() {
        this.show = true
      },
      //改变地址选择，当切换省市区时进行数据留存
      changeAddr(picker) {
        //value=0改变省，1改变市，2改变区
        let val = picker.getValues();
        this.resAddr = val
      },
      //选好地址后点击确定
      chooseThis() {
        this.show = false;
        //选中地址成功后回显
        if (!this.resAddr[0] || !this.resAddr[1] || !this.resAddr[2]) {
          return;
        }
        this.showAddr = this.resAddr[0].name + '-' + this.resAddr[1].name + '-' + this.resAddr[2].name;
        this.province = this.resAddr[0].name;
        this.city = this.resAddr[1].name;
        this.district = this.resAddr[2].name;
      },
      cancelChoose() {
        this.show = false;
      },
      edit:function (placeholder) {
        this.placeholder = placeholder;
        this.showContent = true;
      },
      save(){
        this.$myAxios('index/Resume/expect_update', 'post', {
          user_id:this.$myStorage.query(),
          position:this.placeholder,
          pay:this.money,
          province:this.province,
          city:this.city,
          district:this.district,
          nature:this.work,
        }).then(res => {
          console.log(res);
          if(res.data.state == 1){
            this.$myNotice("编辑成功",2000);
            this.$router.back();
          }else{
            this.$myNotice("网络连接中断...",2000);
            this.$router.back();
          }
        });
      },
      submit:function () {
        this.placeholder = this.value;
      },
      setMsg(page,title,rightText,maxLength,rows,data,placeholder){
        this.$router.push({
          name:page,
          query:{
            title,
            rightText,
            maxLength,
            rows,
            data,
            placeholder
          }
        })
      }

    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    min-height: 6.67rem;
    box-sizing: border-box;
    padding-top: .5rem;
  }

  .boxWrap {
    padding: 0 .15rem 0;
  }
  .rm-qzqw {
    height: .8rem;
    box-sizing: border-box;
    border-bottom: .01rem solid #EEEEEE;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 0 .1rem;
  }
  .rm-tit {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
    margin-bottom: .1rem;
  }

  .rm-qzqw-bot>img {
    width: .08rem;
    height: .14rem;
  }
  .rm-qzqw-bot>div>p:nth-child(1) {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    margin-bottom: .1rem;
  }
  .rm-qzqw-bot>div>p:nth-child(2) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .rm-qzqw-bot2>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .rm-qzqw-bot2>div>img {
    width: .08rem;
    height: .14rem;
    margin-left: .1rem;
  }
  .rm-qzqw-bot2>div>p {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    margin-bottom: 0 !important;
  }
  .rm-gzjl>p {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(153,153,153,1);
    line-height:.24rem;
  }
  .rm-bot {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .rm-bot>img {
    width: .06rem;
    height: .11rem;
  }
  .rm-bot>p {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .btn {
    width:3.24rem;
    height:.44rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.22rem;
    text-align: center;
    line-height: .44rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FFFFFF;
    position: absolute;
    left: 0;
    right: 0;
    bottom: .6rem;
    margin: auto;
  }
  /* 三级联动插件自适应处理 */
  >>> .van-cell {
    color: #999999 !important;
    font-size: .15rem;
    padding: 0;
    line-height: .24rem;
  }

  >>> .van-popup {
    height: 2.7rem !important;
  }

  >>> .van-picker__columns {
    height: 2.2rem !important;
  }

  >>> .van-picker-column__wrapper > li {
    height: .44rem !important;
    line-height: .44rem !important;
  }

  >>> .van-picker-column {
    font-size: .16rem !important;
  }

  >>> .van-picker__toolbar {
    height: .44rem;
    line-height: .44rem;
  }

  >>> .van-picker__cancel {
    font-size: .14rem !important;
    padding: 0 .16rem !important;
  }

  >>> .van-picker__confirm {
    font-size: .14rem !important;
    padding: 0 .16rem !important;
  }

  >>> .van-picker__title {
    font-size: .16rem;
  }
  >>> .van-cell__right-icon {
    margin-left: .05rem;
    height: .24rem;
    font-size: .16rem;
    line-height: .24rem;
  }
  >>>.van-dialog__header{
    line-height:.24rem;
    padding-top:.24rem;
  }
  >>>.van-dialog__content{
    margin: .16rem .12rem .23rem;
  }
  >>>.van-dialog{
    width: 3.2rem;
    font-size: .16rem;
    border-radius:.16rem;
  }
  .dialog{
    width: calc(100% - 0.18rem);
    height: .36rem;
    border: none;
    background: #F6F6F6;
    border-radius: .08rem;
    padding: 0 .09rem;
    font-size: .14rem;
  }
</style>
